<template>
  <div>
    <div id="bimface" style="width: 100%; height: calc(100vh - 50px);"></div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'BimFace',
  props: {
    mode: { type: Number, default: 0 },
    type: { type: String, default: 'drawing' },
    token: { type: String, required: true, default: '' }
  },
  data () {
    return {
      app: null,
      viewer: null,
      annotationToolbar: null,
      annotationManager: null,
      annotationState: null,
      isDrawAnnotationActivated: false
    }
  },
  watch: {
    token: {
      immediate: true,
      handler (value) {
        if (value) {
          this.init()
        } else {
          console.log('token不正确')
        }
      }
    },
    mode (value) {
      this.changeMode(parseInt(value))
    }
  },
  methods: {
    init () {
      const loaderConfig = new BimfaceSDKLoaderConfig()
      loaderConfig.viewToken = this.token
      BimfaceSDKLoader.load(loaderConfig, this.success, this.fail)
    },
    success (viewMetaData) {
      const domShow = document.getElementById('bimface')
      switch (this.type) {
        case 'drawing':
          this.loadDrawing({ viewMetaData, domShow })
          break
        case 'model':
          this.loadModel({ viewMetaData, domShow })
          break
        default:
          console.log('类型支持：model或drawing')
      }
      this.$emit('success')
    },
    fail () {
      console.log('error', error)
      this.$emit('error')
    },
    loadDrawing (value) {
      const viewConfig = new Glodon.Bimface.Viewer.ViewerDrawingConfig()
      viewConfig.domElement = value.domShow
      this.viewer = new Glodon.Bimface.Viewer.ViewerDrawing(viewConfig);
      this.viewer.load(this.token)
      // this.$emit('success', { viewMetaData, domShow })
    },
    loadModel () {
      console.log('模型加载')
    },
    changeMode (num) {
      this.viewer.setDisplayMode(num)
    },
    drawAnnotation () {
      // 创建批注工具条
      if (!this.isDrawAnnotationActivated) {
        this.createAnnotationToolbar()
        this.annotationToolbar.show()
        this.isDrawAnnotationActivated = true
      }
    },
    createAnnotationToolbar() {
      if (!this.annotationToolbar) {
        // 创建批注工具条
        const config = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbarConfig()
        config.viewer = this.viewer
        this.annotationToolbar = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbar(config)
        // 创建批注快照
        this.annotationManager = this.annotationToolbar.getAnnotationManager()
        // 注册批注工具条的监听事件
        this.annotationToolbar.addEventListener(Glodon.Bimface.Plugins.Annotation.AnnotationToolbarEvent.Saved, this.onAnnotationSaved)
        this.annotationToolbar.addEventListener(Glodon.Bimface.Plugins.Annotation.AnnotationToolbarEvent.Cancelled, this.exitAnnotation)
      }
    },
    onAnnotationSaved () {
      this.annotationState = this.annotationToolbar.getAnnotationManager().getCurrentState()
      this.snapshot()
      this.exitAnnotation()
    },
    snapshot () {
      this.annotationManager.createSnapshot(img => {
        this.$emit('snapshot', img)
      })
    },
    exitAnnotation () {
      this.annotationToolbar.getAnnotationManager().exit()
      this.isDrawAnnotationActivated = false
    }
  }
}
</script>

<style lang='stylus' scoped></style>
